<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>地点关键字 + 步行路线规划</title>
  <style type="text/css">
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
    #panel {
      position: fixed;
      background-color: white;
      max-height: 90%;
      overflow-y: auto;
      top: 10px;
      right: 10px;
      width: 280px;
    }
    #panel .amap-call {
      background-color: #009cf9;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    #panel .amap-lib-walking {
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      overflow: hidden;
    }
    /*去掉放大缩小按钮*/
    .amap-ctrl-zoomin{
      display: none !important;
    }
    .amap-ctrl-zoomout {
      display: none !important;
    }
    /*去掉放大缩小按钮*/
    .info {
      top: 55rem !important;
      left: 1rem !important;
    }
    .BMap_cpyCtrl
    {
      display: none;
    }
    .anchorBL {
      display: none;
    }
    .amap-logo img{
      display: none;
    }
    .amap-copyright {
      opacity:0;
    }
  </style>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=53b4e246765e8898dc8ecfa7f7a543e5&plugin=AMap.Walking,AMap.AutoComplete"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<div class="info">
  <div class="input-item">
    <div class="input-item-prepend">
      <span class="input-item-text" style="width:8rem;">请输入起始地点</span>
    </div>
    <input id='tipinput' type="text">
    <div class="input-item-prepend">
      <span class="input-item-text" style="width:8rem;">请输入终止地点</span>
    </div>
    <input id='tipinput2' type="text">
    <button id="btn" class="input-item-text" style="width:8rem;">查询</button>
  </div>
</div>
<script type="text/javascript">
  var map = new AMap.Map("container", {
    resizeEnable: true,
    center: [113.53591,34.817077],//地图中心点
    zoom: 16 //地图显示的缩放级别
  });

  //输入提示
  var auto = new AMap.AutoComplete({
    input: "tipinput",
  });
  var auto2 = new AMap.AutoComplete({
    input: "tipinput2",
  });

  var btn = document.getElementById('btn');

  btn.addEventListener('click',function (){
    draw();
  });

  function draw(){
    var tipinput = document.getElementById('tipinput');  // 起始地点
    var tipinput2 = document.getElementById('tipinput2');  // 终止地点
    var keyword1 = tipinput.value;
    var keyword2 = tipinput2.value;
    //步行导航
    var walking = new AMap.Walking({
      map: map,
      panel: "panel"
    });
    walking.search([
      {keyword: keyword1,city:'郑州'},
      {keyword: keyword2,city:'郑州'}
    ], function(status, result) {
      // result即是对应的步行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
      if (status === 'complete') {
        log.success('绘制步行路线完成')
      } else {
        log.error('步行路线数据查询失败' + result)
      }
    });
  }

</script>
</body>
</html>